<template>
  <div id="s">
    <el-form :inline="true" style="text-align: left">
      <div style="text-align: right;margin-right: 100px">
        <el-form-item>
          <el-button type="info" @click="cancel()" plain>返回</el-button>
        </el-form-item>
      </div>
      <!--  基本信息-->
      <div  class="myBorder">
        <el-row style="margin-bottom: 20px">
          <el-col :span="24"><div class="grid-content bg-purple-light">
            <div class="separate" >&nbsp;&nbsp;&nbsp;&nbsp;<i class="el-icon-tickets"></i>&nbsp;&nbsp;基本信息</div>
          </div></el-col>
        </el-row>
        <div style="margin-left: 20px">
          <el-form-item label="调度单号">
            <el-input v-model="baseForm.ticketId" disabled></el-input>
          </el-form-item>
          <el-form-item label="车牌号">
            <el-input v-model="baseForm.carNumber" disabled></el-input>
          </el-form-item>
          <el-form-item label="起点">
            <el-input v-model="baseForm.startCity.mergerName" disabled></el-input>
          </el-form-item>
          <el-form-item label="终点">
            <el-input v-model="baseForm.endCity.mergerName" disabled></el-input>
          </el-form-item>
          <el-form-item label="要求到达时间">
            <el-input v-model="baseForm.endTime" disabled></el-input>
          </el-form-item>
          <br/>
          <el-form-item label="当前节点">
            <el-input v-model="baseForm.currentNodeCity.mergerName" disabled></el-input>
          </el-form-item>
          <el-form-item label="当前节点时间">
            <el-input v-model="baseForm.currentNodeTime" disabled></el-input>
          </el-form-item>
        </div>
      </div>
      <!-- 司机信息表-->
      <div  class="myBorder">
        <el-row style="margin-bottom: 20px">
          <el-col :span="24"><div class="grid-content bg-purple-light">
            <div class="separate" >&nbsp;&nbsp;&nbsp;&nbsp;<i class="el-icon-tickets"></i>&nbsp;&nbsp;司机信息</div>
          </div></el-col>
        </el-row>
        <div style="margin-left: 20px">
          <el-table :data="driverTableData" stripe style="width: 100%" :header-cell-style="{background:'#f7f7f7', color:'#666666'}">
            <el-table-column
              label="序号"
              width="100"
              align="center"
              type="index"
              fixed>
            </el-table-column>
            <el-table-column
              prop="driverName"
              label="司机姓名"
              align="center"
              width="200">
            </el-table-column>
            <el-table-column
              prop="sex"
              label="性别"
              align="center"
              width="180">
            </el-table-column>
            <el-table-column
              prop="driverTel"
              label="联系方式"
              align="center"
              width="200">
            </el-table-column>
            <el-table-column
              prop="driverId"
              label="身份证号"
              align="center"
              width="300">
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- 委托订单明细-->
      <div  class="myBorder">
        <el-row style="margin-bottom: 20px">
          <el-col :span="24"><div class="grid-content bg-purple-light">
            <div class="separate" >&nbsp;&nbsp;&nbsp;&nbsp;<i class="el-icon-tickets"></i>&nbsp;&nbsp;订单信息</div>
          </div></el-col>
        </el-row>
        <div style="margin-left: 20px">
          <el-table :data="orderFormTableData" stripe style="width: 100%" :header-cell-style="{background:'#f7f7f7', color:'#666666'}">
            <el-table-column
              label="序号"
              width="100"
              align="center"
              type="index"
              fixed>
            </el-table-column>
            <el-table-column
              prop="orderId"
              label="委托单编号"
              align="center"
              sortable
              width="200">
            </el-table-column>
            <el-table-column
              prop="customer.customerName"
              label="委托客户"
              align="center"
              width="200">
            </el-table-column>
            <el-table-column
              prop="transportType"
              label="订单类型"
              align="center"
              width="100">
            </el-table-column>
            <el-table-column
              prop="consignorName"
              label="发货人"
              align="center"
              width="150">
            </el-table-column>
            <el-table-column
              prop="consignorCity.mergerName"
              label="发货地址"
              align="center"
              width="200">
            </el-table-column>
            <el-table-column
              prop="consigneeName"
              label="收货人"
              align="center"
              width="150">
            </el-table-column>
            <el-table-column
              prop="consigneeCity.mergerName"
              label="收获地址"
              align="center"
              width="200">
            </el-table-column>
            <el-table-column
              prop="currentStatus"
              label="当前状态"
              align="center"
              width="180">
            </el-table-column>
            <el-table-column
              label="操作"
              align="center">
              <template v-slot="scope">
                <el-button @click="checkOrderDetail(scope.row)" type="text" size="small">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- 异常信息明细-->
      <div  class="myBorder">
        <el-row style="margin-bottom: 20px">
          <el-col :span="24"><div class="grid-content bg-purple-light">
            <div class="separate" >&nbsp;&nbsp;&nbsp;&nbsp;<i class="el-icon-tickets"></i>&nbsp;&nbsp;异常信息</div>
          </div></el-col>
        </el-row>
        <div style="margin-left: 20px">
          <el-table :data="abnormalRecordTableData" stripe style="width: 100%" :header-cell-style="{background:'#f7f7f7', color:'#666666'}">
            <el-table-column
              label="序号"
              width="100"
              align="center"
              type="index"
              fixed>
            </el-table-column>
            <el-table-column
              prop="aid"
              width="300"
              align="center"
              label="异常单号">
            </el-table-column>
            <el-table-column
              prop="abnormalType"
              width="180"
              align="center"
              label="异常类型">
            </el-table-column>
            <el-table-column
              prop="abnormalTime"
              width="180"
              align="center"
              label="异常时间">
            </el-table-column>
            <el-table-column
              prop="abnormalAddress"
              width="300"
              align="center"
              label="异常地点">
            </el-table-column>
            <el-table-column
              prop="status"
              width="180"
              align="center"
              label="状态">
            </el-table-column>
            <el-table-column
              label="操作"
              align="center"
              width="180">
              <template v-slot="scope">
                <el-button @click="checkAbnormalRecord(scope.row)" type="text" size="small">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-form>
    <!--  查看异常详情页面-->
    <el-dialog
      title="异常详情"
      :visible.sync="showAbnormalDetail"
      style="text-align: left"
      width="30%">
      <span>
        <el-form :model="AbnormalDetailForm" label-width="80px">
          <el-form-item label="调度单号">
            <el-input v-model="AbnormalDetailForm.ticketId" style="width: 100%;" disabled></el-input>
          </el-form-item>
          <el-form-item label="异常时间">
            <el-input v-model="AbnormalDetailForm.abnormalTime" style="width: 100%;" disabled></el-input>
          </el-form-item>
          <el-form-item label="异常类型">
            <el-input v-model="AbnormalDetailForm.abnormalType" style="width: 100%;" disabled></el-input>
          </el-form-item>
          <el-form-item label="异常地点">
            <el-input v-model="AbnormalDetailForm.abnormalAddress" style="width: 100%;" disabled></el-input>
          </el-form-item>
          <el-form-item label="异常描述">
            <el-input v-model="AbnormalDetailForm.abnormalDescribe" style="width: 100%;" disabled></el-input>
          </el-form-item>
          <el-form-item label="受理结果">
             <el-select v-model="AbnormalDetailForm.acceptResult" style="width: 100%" disabled>
                <el-option
                  v-for="item in acceptResultList"
                  :key="item.id"
                  :label="item.acceptResult"
                  :value="item.id">
                </el-option>
             </el-select>
          </el-form-item>
          <el-form-item label="受理描述">
            <el-input type="textarea" v-model="AbnormalDetailForm.acceptDescribe" style="width: 100%" disabled></el-input>
          </el-form-item>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showAbnormalDetail = false">返回</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "DispatchTrackDetail",
  data() {
    return {
      //基本信息
      baseForm: {},
      // 司机信息表格
      driverTableData: [],
      // 订单信息表格
      orderFormTableData: [],
      // 异常信息表格
      abnormalRecordTableData: [],
      //异常详情
      AbnormalDetailForm:{},
      //显示查看异常详情页面
      showAbnormalDetail: false,
      //受理结果
      acceptResultList:[]
    }
  },
  methods: {

    cancel() {
        this.$router.back()
    },

    // 查看订单详情
    checkOrderDetail(row){
      this.$store.commit('orderOperationType', 'checkOrder')
      this.$store.commit('currentOrder', row)
      this.$router.push('OrderOperate')
    },

    // 查看异常记录
    checkAbnormalRecord(row){
      //显示对话框
      this.showAbnormalDetail = true
      //表单赋值
      this.AbnormalDetailForm = row
    },

    // 获取异常类型
    getAcceptResultList() {
      this.$axios({
        url: 'dispatch/abnormal/acceptResultList',
        method: 'post',
      }).then(res => {
        if (res.data.success) {
          this.acceptResultList = res.data.object;
        }
      }).catch(err => {
        this.$message.error(err.message);
      })
    },
  },
  created() {
    this.driverTableData = []
    this.baseForm = this.$store.state.dispatchTicket
    this.driverTableData.push(this.$store.state.dispatchTicket.carInfo.baseDriver)
    this.orderFormTableData = this.$store.state.dispatchTicket.orderFormList
    this.abnormalRecordTableData = this.$store.state.dispatchTicket.dispatchAbnormalRecordList
    this.getAcceptResultList()
  }
}
</script>

<style scoped>
.el-select {
  width: 100%;
}
.myBorder {
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  margin: 20px 0;
}
.separate {
  width: 100%;height: 50px;background: #339999;border-color: #339999;text-align: left;line-height:50px;color: #FFFFFF;
}

#s{
  width:90%;
  margin:10px auto;
  background-color: #ffffff;
  box-shadow: 10px 10px 5px #c4c6c7;
  border-radius: 5px
}

.el-button--info:hover {
  background: #209e91;
  border-color: #209e91;
  color: #FFF;
}

</style>
